<template>
  <div class="content-manage-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">内容管理</h1>
        <p class="page-description">管理网站首页内容配置</p>
      </div>
    </div>

    <!-- 内容导航 -->
    <div class="content-nav">
      <el-card class="nav-card" shadow="hover">
        <div class="nav-items">
          <div
            v-for="tab in tabs"
            :key="tab.key"
            :class="['nav-item', { active: activeTab === tab.key }]"
            @click="activeTab = tab.key"
          >
            <div class="nav-icon">
              <el-icon>
                <component :is="tab.icon" />
              </el-icon>
            </div>
            <div class="nav-content">
              <div class="nav-title">{{ tab.title }}</div>
              <div class="nav-description">{{ tab.description }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 内容区域 -->
    <div class="content-container">
      <div class="content-scroll">
        <el-card class="content-card" shadow="never">
          <!-- 英雄区块设置 -->
          <div v-if="activeTab === 'hero_section'" class="content-section">
            <div class="section-header">
              <h3 class="section-title">英雄区块设置</h3>
              <p class="section-description">管理首页英雄区块内容</p>
            </div>

            <el-form
              :model="heroSectionSettings"
              label-position="top"
              class="content-form"
            >
              <el-form-item label="姓名">
                <el-input
                  v-model="heroSectionSettings.name"
                  placeholder="请输入姓名"
                />
              </el-form-item>

              <el-form-item label="简介">
                <el-input
                  v-model="heroSectionSettings.description"
                  placeholder="请输入简介"
                />
              </el-form-item>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="头像">
                    <div class="upload-container">
                      <div class="cover-image-section">
                        <div
                          v-if="heroSectionSettings.avatar_url"
                          class="cover-preview"
                        >
                          <img
                            :src="heroSectionSettings.avatar_url"
                            alt="头像"
                          />
                          <div class="cover-actions">
                            <el-button
                              size="small"
                              type="danger"
                              @click="removeAvatarImage"
                            >
                              <el-icon><Refresh /></el-icon>
                              移除
                            </el-button>
                          </div>
                        </div>
                        <div v-else class="cover-upload">
                          <el-upload
                            :show-file-list="false"
                            :before-upload="handleAvatarUpload"
                            accept="image/*"
                          >
                            <el-button>
                              <el-icon><Plus /></el-icon>
                              上传头像
                            </el-button>
                          </el-upload>
                        </div>
                      </div>
                      <div class="upload-tip">
                        支持 JPG、PNG 格式，建议尺寸 200x200px，大小不超过 2MB
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="主要按钮文本">
                    <el-input
                      v-model="heroSectionSettings.primary_button_text"
                      placeholder="请输入按钮文本"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="主要按钮链接">
                    <el-input
                      v-model="heroSectionSettings.primary_button_link"
                      placeholder="请输入按钮链接"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="次要按钮文本">
                    <el-input
                      v-model="heroSectionSettings.secondary_button_text"
                      placeholder="请输入按钮文本"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="次要按钮链接">
                    <el-input
                      v-model="heroSectionSettings.secondary_button_link"
                      placeholder="请输入按钮链接"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <!-- 关于我设置 -->
          <div v-if="activeTab === 'about_me'" class="content-section">
            <div class="section-header">
              <h3 class="section-title">关于我设置</h3>
              <p class="section-description">管理个人介绍和统计信息</p>
            </div>

            <el-form
              :model="aboutMeSettings"
              label-position="top"
              class="content-form"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="职位标题">
                    <el-input
                      v-model="aboutMeSettings.title"
                      placeholder="请输入职位标题"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="简短描述">
                <el-input
                  v-model="aboutMeSettings.description"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入简短描述"
                />
              </el-form-item>

              <el-form-item label="详细个人简介">
                <el-input
                  v-model="aboutMeSettings.bio"
                  type="textarea"
                  :rows="5"
                  placeholder="请输入详细个人简介"
                />
              </el-form-item>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="封面图片">
                    <div class="upload-container">
                      <div class="cover-image-section">
                        <div
                          v-if="aboutMeSettings.cover_image_url"
                          class="cover-preview"
                        >
                          <img
                            :src="aboutMeSettings.cover_image_url"
                            alt="封面图片"
                          />
                          <div class="cover-actions">
                            <el-button
                              size="small"
                              type="danger"
                              @click="removeCoverImage"
                            >
                              <el-icon><Refresh /></el-icon>
                              移除
                            </el-button>
                          </div>
                        </div>
                        <div v-else class="cover-upload">
                          <el-upload
                            :show-file-list="false"
                            :before-upload="handleCoverUpload"
                            accept="image/*"
                          >
                            <el-button>
                              <el-icon><Plus /></el-icon>
                              上传封面
                            </el-button>
                          </el-upload>
                        </div>
                      </div>
                      <div class="upload-tip">
                        支持 JPG、PNG 格式，建议尺寸 1200x400px，大小不超过 5MB
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="工作经验年数">
                    <el-input-number
                      v-model="aboutMeSettings.experience_years"
                      :min="0"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="完成项目数">
                    <el-input-number
                      v-model="aboutMeSettings.completed_projects"
                      :min="0"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="客户数量">
                    <el-input-number
                      v-model="aboutMeSettings.clients_count"
                      :min="0"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="获奖数量">
                    <el-input-number
                      v-model="aboutMeSettings.awards_count"
                      :min="0"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>

          <!-- 联系信息设置 -->
          <div v-if="activeTab === 'contact_info'" class="content-section">
            <div class="section-header">
              <h3 class="section-title">联系信息设置</h3>
              <p class="section-description">管理邮箱、电话和社交媒体信息</p>
            </div>

            <el-form
              :model="contactInfoSettings"
              label-position="top"
              class="content-form"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="邮箱">
                    <el-input
                      v-model="contactInfoSettings.email"
                      placeholder="请输入邮箱地址"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电话">
                    <el-input
                      v-model="contactInfoSettings.phone"
                      placeholder="请输入电话号码"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="位置">
                <el-input
                  v-model="contactInfoSettings.location"
                  placeholder="请输入位置信息"
                />
              </el-form-item>

              <el-form-item label="社交媒体链接">
                <el-input
                  v-model="contactInfoSettings.social_links"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入社交媒体链接（每行一个）"
                />
              </el-form-item>
            </el-form>
          </div>

          <!-- 简历管理 -->
          <div v-if="activeTab === 'resume'" class="content-section">
            <div class="section-header">
              <h3 class="section-title">简历管理</h3>
              <p class="section-description">上传和管理个人简历图片和PDF文件</p>
            </div>

            <el-form
              :model="resumeSettings"
              label-position="top"
              class="content-form"
            >
              <el-form-item label="PDF简历文件">
                <div class="upload-container">
                  <div class="pdf-section">
                    <div
                      v-if="resumeSettings.pdf && resumeSettings.pdf.url"
                      class="pdf-preview"
                    >
                      <div class="pdf-info">
                        <div class="pdf-icon">
                          <el-icon size="48"><Document /></el-icon>
                        </div>
                        <div class="pdf-details">
                          <div class="pdf-name">
                            {{ resumeSettings.pdf.name }}
                          </div>
                          <div class="pdf-size">
                            {{ resumeSettings.pdf.size }}
                          </div>
                        </div>
                      </div>
                      <div class="pdf-actions">
                        <el-button
                          type="primary"
                          size="small"
                          @click="previewPdf"
                          title="预览"
                        >
                          <el-icon><ZoomIn /></el-icon>
                          预览
                        </el-button>
                        <el-button
                          type="danger"
                          size="small"
                          @click="removePdf"
                          title="删除"
                        >
                          <el-icon><Delete /></el-icon>
                          删除
                        </el-button>
                      </div>
                    </div>
                    <div v-else class="pdf-upload">
                      <el-upload
                        :show-file-list="false"
                        :before-upload="handlePdfUpload"
                        accept="application/pdf"
                      >
                        <div class="upload-placeholder">
                          <el-icon class="upload-icon"><Plus /></el-icon>
                          <div class="upload-text">上传PDF简历</div>
                        </div>
                      </el-upload>
                    </div>
                  </div>
                  <div class="upload-tip">支持 PDF 格式，大小不超过 10MB</div>
                </div>
              </el-form-item>

              <el-divider content-position="left">简历图片</el-divider>

              <el-form-item label="简历图片">
                <div class="upload-container">
                  <!-- 已上传的图片列表 -->
                  <div class="resume-images-section">
                    <div
                      v-for="(image, index) in resumeSettings.images"
                      :key="index"
                      class="resume-image-item"
                    >
                      <div class="image-preview">
                        <img
                          :src="image.url"
                          :alt="image.name"
                          @click="previewImage(image.url)"
                        />
                        <div class="image-overlay">
                          <div class="image-actions">
                            <el-button
                              type="primary"
                              size="small"
                              @click="previewImage(image.url)"
                              title="预览"
                            >
                              <el-icon><ZoomIn /></el-icon>
                            </el-button>
                            <el-button
                              type="danger"
                              size="small"
                              @click="removeImage(index)"
                              title="删除"
                            >
                              <el-icon><Delete /></el-icon>
                            </el-button>
                          </div>
                          <!-- 顺序控制 -->
                          <div class="order-controls">
                            <el-button
                              v-if="index > 0"
                              size="small"
                              circle
                              @click="moveImageUp(index)"
                              title="上移"
                            >
                              <el-icon><ArrowUp /></el-icon>
                            </el-button>
                            <span class="order-number">{{ index + 1 }}</span>
                            <el-button
                              v-if="index < resumeSettings.images.length - 1"
                              size="small"
                              circle
                              @click="moveImageDown(index)"
                              title="下移"
                            >
                              <el-icon><ArrowDown /></el-icon>
                            </el-button>
                          </div>
                        </div>
                      </div>
                      <div class="image-info">
                        <div class="image-name">{{ image.name }}</div>
                        <div class="image-size">{{ image.size }}</div>
                      </div>
                    </div>

                    <!-- 添加新图片按钮 -->
                    <div class="resume-image-item add-image">
                      <div class="image-upload">
                        <el-upload
                          :show-file-list="false"
                          :before-upload="handleResumeImageUpload"
                          accept="image/*"
                        >
                          <div class="upload-placeholder">
                            <el-icon class="upload-icon"><Plus /></el-icon>
                            <div class="upload-text">添加图片</div>
                          </div>
                        </el-upload>
                      </div>
                    </div>
                  </div>

                  <div class="upload-tip">
                    支持 JPG、PNG 格式，建议尺寸适中，大小不超过
                    5MB。可以拖拽图片调整顺序。
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>

          <!-- Footer设置 -->
          <div v-if="activeTab === 'footer'" class="content-section">
            <div class="section-header">
              <h3 class="section-title">页脚设置</h3>
              <p class="section-description">管理页脚快速链接和社交媒体信息</p>
            </div>

            <el-form
              :model="footerSettings"
              label-position="top"
              class="content-form"
            >
              <!-- 页脚基础信息 -->
              <el-card class="footer-basic-card" shadow="never">
                <template #header>
                  <div class="card-header">
                    <el-icon class="header-icon"><Document /></el-icon>
                    <span class="header-title">基础信息</span>
                  </div>
                </template>

                <el-form-item label="页脚描述">
                  <el-input
                    v-model="footerSettings.description"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入页脚描述信息"
                  />
                </el-form-item>
              </el-card>

              <!-- 快速链接 -->
              <el-card class="footer-section-card" shadow="never">
                <template #header>
                  <div class="card-header">
                    <el-icon class="header-icon"><Link /></el-icon>
                    <span class="header-title">快速链接</span>
                  </div>
                </template>

                <el-form-item label="标题">
                  <el-input
                    v-model="footerSettings.quickLinksTitle"
                    placeholder="快速链接"
                  />
                </el-form-item>

                <el-form-item label="链接列表">
                  <div class="links-editor">
                    <div class="links-list">
                      <transition-group name="link-list">
                        <div
                          v-for="(link, index) in footerSettings.quickLinks"
                          :key="`link-${index}`"
                          class="link-item"
                        >
                          <div class="link-item-header">
                            <span class="item-index">{{ index + 1 }}</span>
                            <el-button
                              size="small"
                              type="danger"
                              text
                              @click="removeQuickLink(index)"
                              class="remove-btn"
                            >
                              <el-icon><Delete /></el-icon>
                            </el-button>
                          </div>
                          <div class="link-content">
                            <el-row :gutter="12">
                              <el-col :span="8">
                                <el-input
                                  v-model="link.title"
                                  placeholder="链接标题"
                                />
                              </el-col>
                              <el-col :span="10">
                                <el-input
                                  v-model="link.url"
                                  placeholder="链接地址"
                                />
                              </el-col>
                              <el-col :span="6">
                                <el-select
                                  v-model="link.target"
                                  placeholder="打开方式"
                                  style="width: 100%"
                                >
                                  <el-option label="当前窗口" value="_self" />
                                  <el-option label="新窗口" value="_blank" />
                                </el-select>
                              </el-col>
                            </el-row>
                          </div>
                        </div>
                      </transition-group>
                    </div>
                    <div class="add-item">
                      <el-button
                        type="primary"
                        plain
                        @click="addQuickLink"
                        class="add-btn"
                      >
                        <el-icon><Plus /></el-icon>
                        添加快速链接
                      </el-button>
                    </div>
                  </div>
                </el-form-item>
              </el-card>

              <!-- 资源链接 -->
              <el-card class="footer-section-card" shadow="never">
                <template #header>
                  <div class="card-header">
                    <el-icon class="header-icon"><Document /></el-icon>
                    <span class="header-title">资源链接</span>
                  </div>
                </template>

                <el-form-item label="标题">
                  <el-input
                    v-model="footerSettings.resourcesTitle"
                    placeholder="资源"
                  />
                </el-form-item>

                <el-form-item label="链接列表">
                  <div class="links-editor">
                    <div class="links-list">
                      <transition-group name="link-list">
                        <div
                          v-for="(resource, index) in footerSettings.resources"
                          :key="`resource-${index}`"
                          class="link-item"
                        >
                          <div class="link-item-header">
                            <span class="item-index">{{ index + 1 }}</span>
                            <el-button
                              size="small"
                              type="danger"
                              text
                              @click="removeResource(index)"
                              class="remove-btn"
                            >
                              <el-icon><Delete /></el-icon>
                            </el-button>
                          </div>
                          <div class="link-content">
                            <el-row :gutter="12">
                              <el-col :span="8">
                                <el-input
                                  v-model="resource.title"
                                  placeholder="链接标题"
                                />
                              </el-col>
                              <el-col :span="10">
                                <el-input
                                  v-model="resource.url"
                                  placeholder="链接地址"
                                />
                              </el-col>
                              <el-col :span="6">
                                <el-select
                                  v-model="resource.target"
                                  placeholder="打开方式"
                                  style="width: 100%"
                                >
                                  <el-option label="当前窗口" value="_self" />
                                  <el-option label="新窗口" value="_blank" />
                                </el-select>
                              </el-col>
                            </el-row>
                          </div>
                        </div>
                      </transition-group>
                    </div>
                    <div class="add-item">
                      <el-button
                        type="primary"
                        plain
                        @click="addResource"
                        class="add-btn"
                      >
                        <el-icon><Plus /></el-icon>
                        添加资源链接
                      </el-button>
                    </div>
                  </div>
                </el-form-item>
              </el-card>

              <!-- 社交媒体 -->
              <el-card class="footer-section-card" shadow="never">
                <template #header>
                  <div class="card-header">
                    <el-icon class="header-icon"><Star /></el-icon>
                    <span class="header-title">社交媒体</span>
                  </div>
                </template>

                <el-form-item label="标题">
                  <el-input
                    v-model="footerSettings.socialMediaTitle"
                    placeholder="社交媒体"
                  />
                </el-form-item>

                <el-form-item label="链接列表">
                  <div class="links-editor">
                    <div class="links-list">
                      <transition-group name="link-list">
                        <div
                          v-for="(social, index) in footerSettings.socialMedia"
                          :key="`social-${index}`"
                          class="link-item"
                        >
                          <div class="link-item-header">
                            <span class="item-index">{{ index + 1 }}</span>
                            <el-button
                              size="small"
                              type="danger"
                              text
                              @click="removeSocialMedia(index)"
                              class="remove-btn"
                            >
                              <el-icon><Delete /></el-icon>
                            </el-button>
                          </div>
                          <div class="link-content">
                            <el-row :gutter="12">
                              <el-col :span="6">
                                <el-input
                                  v-model="social.title"
                                  placeholder="平台名称"
                                />
                              </el-col>
                              <el-col :span="8">
                                <el-input
                                  v-model="social.url"
                                  placeholder="链接地址"
                                />
                              </el-col>
                              <el-col :span="10">
                                <el-input
                                  v-model="social.icon"
                                  placeholder="图标名称或代码"
                                />
                              </el-col>
                            </el-row>
                          </div>
                        </div>
                      </transition-group>
                    </div>
                    <div class="add-item">
                      <el-button
                        type="primary"
                        plain
                        @click="addSocialMedia"
                        class="add-btn"
                      >
                        <el-icon><Plus /></el-icon>
                        添加社交媒体
                      </el-button>
                    </div>
                  </div>
                </el-form-item>
              </el-card>

              <!-- 其他设置 -->
              <el-card class="footer-section-card" shadow="never">
                <template #header>
                  <div class="card-header">
                    <el-icon class="header-icon"><Setting /></el-icon>
                    <span class="header-title">其他设置</span>
                  </div>
                </template>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="邮箱地址">
                      <el-input
                        v-model="footerSettings.email"
                        placeholder="请输入邮箱地址"
                      >
                        <template #prefix>
                          <el-icon><Message /></el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="版权信息">
                      <el-input
                        v-model="footerSettings.copyright"
                        placeholder="请输入版权信息"
                      >
                        <template #prefix>
                          <el-icon><Document /></el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-card>
            </el-form>
          </div>
        </el-card>
      </div>

      <!-- 底部操作栏 -->
      <div class="bottom-actions">
        <div class="actions-container">
          <el-button
            type="primary"
            @click="saveSettings"
            :loading="saving"
            class="save-btn"
          >
            <el-icon><Check /></el-icon>
            保存设置
          </el-button>
          <el-button @click="resetSettings" class="reset-btn">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// Vue 相关导入
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";

// 图标导入
const {
  Star,
  User,
  Phone,
  Document,
  Check,
  Refresh,
  Delete,
  Plus,
  Link,
  Setting,
  Message,
  ZoomIn,
  ArrowUp,
  ArrowDown,
} = await import("@element-plus/icons-vue");

// 类型定义
type ApiResponse<T = any> = {
  success: boolean;
  data?: T;
  message?: string;
};

// 响应式数据
const activeTab = ref("hero_section");
const saving = ref(false);

// 标签配置
const tabs = [
  {
    key: "hero_section",
    title: "英雄区块",
    description: "首页英雄区块内容",
    icon: Star,
  },
  {
    key: "about_me",
    title: "关于我",
    description: "个人介绍和统计信息",
    icon: User,
  },
  {
    key: "contact_info",
    title: "联系信息",
    description: "邮箱、电话和社交媒体",
    icon: Phone,
  },
  {
    key: "resume",
    title: "简历管理",
    description: "上传和管理个人简历",
    icon: Document,
  },
  {
    key: "footer",
    title: "页脚设置",
    description: "管理页脚快速链接和社交媒体",
    icon: Link,
  },
];

// 关于我设置数据
const aboutMeSettings = ref({
  title: "",
  description: "",
  bio: "",
  avatar_url: "",
  cover_image_url: "",
  experience_years: 0,
  completed_projects: 0,
  clients_count: 0,
  awards_count: 0,
});

// 联系信息设置数据
const contactInfoSettings = ref({
  email: "",
  phone: "",
  location: "",
  social_links: "",
});

// 英雄区块设置数据
const heroSectionSettings = ref({
  name: "",
  description: "",
  avatar_url: "",
  primary_button_text: "",
  primary_button_link: "",
  secondary_button_text: "",
  secondary_button_link: "",
});

// 简历设置数据
const resumeSettings = ref({
  images: [] as Array<{
    url: string;
    name: string;
    size: string;
  }>,
  pdf: {
    url: "",
    name: "",
    size: "",
  } as {
    url: string;
    name: string;
    size: string;
  } | null,
});

// Footer设置数据
const footerSettings = ref({
  description: "",
  quickLinks: [] as Array<{
    title: string;
    url: string;
    target?: string;
  }>,
  quickLinksTitle: "快速链接",
  resources: [] as Array<{
    title: string;
    url: string;
    target?: string;
  }>,
  resourcesTitle: "资源",
  socialMedia: [] as Array<{
    title: string;
    url: string;
    icon: string;
    target?: string;
  }>,
  socialMediaTitle: "社交媒体",
  email: "",
  copyright: "个人博客",
});

// 方法
const saveSettings = async () => {
  saving.value = true;

  try {
    let saveData = null;
    let apiUrl = "";

    // 根据当前标签页选择要保存的数据和API
    switch (activeTab.value) {
      case "about_me":
        saveData = aboutMeSettings.value;
        apiUrl = "/api/admin/home/about-me";
        break;
      case "contact_info":
        saveData = contactInfoSettings.value;
        apiUrl = "/api/admin/home/contact-info";
        break;
      case "hero_section":
        saveData = heroSectionSettings.value;
        apiUrl = "/api/admin/home/hero-section";
        break;
      case "resume":
        saveData = resumeSettings.value;
        apiUrl = "/api/admin/home/resume";
        break;
      case "footer":
        saveData = footerSettings.value;
        apiUrl = "/api/admin/home/footer";
        break;
    }

    const response = await $fetch<ApiResponse>(apiUrl, {
      method: "POST",
      body: saveData,
    });

    if (response.success) {
      ElMessage.success("设置保存成功！");
    } else {
      throw new Error(response.message || "保存失败");
    }
  } catch (error: any) {
    console.error("保存设置失败:", error);
    ElMessage.error(`保存失败: ${error.message}`);
  } finally {
    saving.value = false;
  }
};

const resetSettings = () => {
  // 重置当前标签页的设置
  ElMessage.info("设置已重置");
};

// 图片上传相关方法
const handleImageUpload = async (
  file: File,
  options: {
    type: "avatar" | "cover" | "background";
    maxSize: number; // MB
    errorMessage: string;
    successMessage: string;
    targetField: string;
  }
) => {
  try {
    // 验证文件格式和大小
    const isJPGOrPNG = file.type === "image/jpeg" || file.type === "image/png";
    const isLtMaxSize = file.size / 1024 / 1024 < options.maxSize;

    if (!isJPGOrPNG) {
      ElMessage.error(`${options.errorMessage}只能是 JPG 或 PNG 格式!`);
      return false;
    }
    if (!isLtMaxSize) {
      ElMessage.error(
        `${options.errorMessage}大小不能超过 ${options.maxSize}MB!`
      );
      return false;
    }

    // 创建FormData对象
    const formData = new FormData();
    formData.append("file", file);
    formData.append("category", "public");

    // 使用 $fetchRaw 替代 $fetch 以避免类型推断问题
    const response = await $fetch<ApiResponse>("/api/upload", {
      method: "POST",
      body: formData,
    });

    if (response.success) {
      // 根据类型设置对应的URL
      if (options.type === "avatar") {
        heroSectionSettings.value.avatar_url = response.data.url || "";
      } else if (options.type === "cover") {
        aboutMeSettings.value.cover_image_url = response.data.url || "";
      }

      ElMessage.success(options.successMessage);
    } else {
      ElMessage.error("上传失败");
    }
  } catch (error: any) {
    console.error("上传失败:", error);
    ElMessage.error(error.data?.message || "上传失败");
  }

  return false; // 阻止默认上传
};

// 头像上传
const handleAvatarUpload = (file: File) => {
  return handleImageUpload(file, {
    type: "avatar",
    maxSize: 2,
    errorMessage: "头像图片",
    successMessage: "头像上传成功",
    targetField: "avatar_url",
  });
};

// 封面图片上传
const handleCoverUpload = (file: File) => {
  return handleImageUpload(file, {
    type: "cover",
    maxSize: 5,
    errorMessage: "封面图片",
    successMessage: "封面图片上传成功",
    targetField: "cover_image_url",
  });
};

const removeAvatarImage = () => {
  heroSectionSettings.value.avatar_url = "";
};

const removeCoverImage = () => {
  aboutMeSettings.value.cover_image_url = "";
};

// PDF文件上传
const handlePdfUpload = async (file: File) => {
  try {
    // 验证文件格式和大小
    const isPDF = file.type === "application/pdf";
    const isLtMaxSize = file.size / 1024 / 1024 < 10;

    if (!isPDF) {
      ElMessage.error("简历文件只能是 PDF 格式!");
      return false;
    }
    if (!isLtMaxSize) {
      ElMessage.error("简历文件大小不能超过 10MB!");
      return false;
    }

    // 创建FormData对象
    const formData = new FormData();
    formData.append("file", file);
    formData.append("category", "public");

    // 使用 $fetchRaw 替代 $fetch 以避免类型推断问题
    const response = await $fetch<ApiResponse>("/api/upload", {
      method: "POST",
      body: formData,
    });

    if (response.success) {
      // 设置PDF文件信息
      resumeSettings.value.pdf = {
        url: response.data.url || "",
        name: file.name,
        size: `${(file.size / 1024 / 1024).toFixed(2)} MB`,
      };

      ElMessage.success("PDF简历上传成功");
    } else {
      ElMessage.error("上传失败");
    }
  } catch (error: any) {
    console.error("上传失败:", error);
    ElMessage.error(error.data?.message || "上传失败");
  }

  return false; // 阻止默认上传
};

// 预览PDF
const previewPdf = () => {
  if (resumeSettings.value.pdf && resumeSettings.value.pdf.url) {
    window.open(resumeSettings.value.pdf.url, "_blank");
  }
};

// 移除PDF
const removePdf = () => {
  resumeSettings.value.pdf = null;
  ElMessage.success("PDF文件已删除");
};

// 简历图片上传
const handleResumeImageUpload = async (file: File) => {
  try {
    // 验证文件格式和大小
    const isJPGOrPNG = file.type === "image/jpeg" || file.type === "image/png";
    const isLtMaxSize = file.size / 1024 / 1024 < 5;

    if (!isJPGOrPNG) {
      ElMessage.error("图片只能是 JPG 或 PNG 格式!");
      return false;
    }
    if (!isLtMaxSize) {
      ElMessage.error("图片大小不能超过 5MB!");
      return false;
    }

    // 创建FormData对象
    const formData = new FormData();
    formData.append("file", file);
    formData.append("category", "public");

    // 使用 $fetchRaw 替代 $fetch 以避免类型推断问题
    const response = await $fetch<ApiResponse>("/api/upload", {
      method: "POST",
      body: formData,
    });

    if (response.success) {
      // 添加到图片数组
      resumeSettings.value.images.push({
        url: response.data.url || "",
        name: file.name,
        size: `${(file.size / 1024 / 1024).toFixed(2)} MB`,
      });

      ElMessage.success("图片上传成功");
    } else {
      ElMessage.error("上传失败");
    }
  } catch (error: any) {
    console.error("上传失败:", error);
    ElMessage.error(error.data?.message || "上传失败");
  }

  return false; // 阻止默认上传
};

// 预览图片
const previewImage = (url: string) => {
  window.open(url, "_blank");
};

// 移除图片
const removeImage = (index: number) => {
  resumeSettings.value.images.splice(index, 1);
  ElMessage.success("图片已删除");
};

// 图片上移
const moveImageUp = (index: number) => {
  if (index > 0) {
    const images = [...resumeSettings.value.images];
    const currentImage = images[index]!;
    const prevImage = images[index - 1]!;
    // 交换图片位置
    images[index] = prevImage;
    images[index - 1] = currentImage;
    resumeSettings.value.images = images;
  }
};

// 图片下移
const moveImageDown = (index: number) => {
  const images = resumeSettings.value.images;
  if (index < images.length - 1) {
    const imageList = [...images];
    const currentImage = imageList[index]!;
    const nextImage = imageList[index + 1]!;
    // 交换图片位置
    imageList[index] = nextImage;
    imageList[index + 1] = currentImage;
    resumeSettings.value.images = imageList;
  }
};

// Footer设置相关方法
// 快速链接管理
const addQuickLink = () => {
  footerSettings.value.quickLinks.push({
    title: "",
    url: "",
    target: "_blank",
  });
};

const removeQuickLink = (index: number) => {
  footerSettings.value.quickLinks.splice(index, 1);
};

// 资源链接管理
const addResource = () => {
  footerSettings.value.resources.push({
    title: "",
    url: "",
    target: "_blank",
  });
};

const removeResource = (index: number) => {
  footerSettings.value.resources.splice(index, 1);
};

// 社交媒体管理
const addSocialMedia = () => {
  footerSettings.value.socialMedia.push({
    title: "",
    url: "",
    icon: "",
    target: "_blank",
  });
};

const removeSocialMedia = (index: number) => {
  footerSettings.value.socialMedia.splice(index, 1);
};

// 加载设置数据
const loadSettings = async () => {
  try {
    // 加载英雄区块数据
    const heroSectionResponse = await $fetch<ApiResponse>(
      "/api/home/hero-section"
    );
    if (heroSectionResponse.success && heroSectionResponse.data) {
      heroSectionSettings.value = {
        ...heroSectionSettings.value,
        ...heroSectionResponse.data,
      };
    }

    // 加载关于我数据
    const aboutMeResponse = await $fetch<ApiResponse>("/api/home/about-me");
    if (aboutMeResponse.success && aboutMeResponse.data) {
      aboutMeSettings.value = {
        ...aboutMeSettings.value,
        ...aboutMeResponse.data,
      };
    }

    // 加载联系信息数据
    const contactInfoResponse = await $fetch<ApiResponse>(
      "/api/home/contact-info"
    );
    if (contactInfoResponse.success && contactInfoResponse.data) {
      contactInfoSettings.value = {
        ...contactInfoSettings.value,
        ...contactInfoResponse.data,
      };
    }

    // 加载简历数据
    const resumeResponse = await $fetch<ApiResponse>("/api/home/resume");
    if (resumeResponse.success && resumeResponse.data) {
      // 确保images是一个数组，防止旧数据结构导致的问题
      if (resumeResponse.data.images) {
        resumeSettings.value.images = Array.isArray(resumeResponse.data.images)
          ? resumeResponse.data.images
          : [];
      } else {
        // 如果是旧数据结构，清空数组
        resumeSettings.value.images = [];
      }

      // 加载PDF文件信息
      if (resumeResponse.data.pdf) {
        resumeSettings.value.pdf = resumeResponse.data.pdf;
      } else {
        resumeSettings.value.pdf = null;
      }
    }

    // 加载Footer数据
    const footerResponse = await $fetch<ApiResponse>("/api/home/footer");
    if (footerResponse.success && footerResponse.data) {
      // 确保数组数据正确初始化
      if (footerResponse.data.quickLinks) {
        footerSettings.value.quickLinks = Array.isArray(
          footerResponse.data.quickLinks
        )
          ? footerResponse.data.quickLinks
          : [];
      }

      if (footerResponse.data.resources) {
        footerSettings.value.resources = Array.isArray(
          footerResponse.data.resources
        )
          ? footerResponse.data.resources
          : [];
      }

      if (footerResponse.data.socialMedia) {
        footerSettings.value.socialMedia = Array.isArray(
          footerResponse.data.socialMedia
        )
          ? footerResponse.data.socialMedia
          : [];
      }

      // 加载其他字段
      footerSettings.value.description = footerResponse.data.description || "";
      footerSettings.value.quickLinksTitle =
        footerResponse.data.quickLinksTitle || "快速链接";
      footerSettings.value.resourcesTitle =
        footerResponse.data.resourcesTitle || "资源";
      footerSettings.value.socialMediaTitle =
        footerResponse.data.socialMediaTitle || "社交媒体";
      footerSettings.value.email = footerResponse.data.email || "";
      footerSettings.value.copyright =
        footerResponse.data.copyright || "个人博客";
    }
  } catch (error) {
    console.error("加载设置数据失败:", error);
  }
};

// 页面加载时获取数据
onMounted(() => {
  loadSettings();
});

// 页面元数据
useHead({
  title: "内容管理 - 博客管理系统",
});
</script>

<style scoped>
.page-header {
  margin-bottom: 24px;
  animation: fadeInDown 0.6s ease-out;
}

.header-content h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-content p {
  color: #666;
  margin: 0;
  font-size: 14px;
}

.save-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.reset-btn {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* 内容容器与滚动区域 */
.content-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 440px); /* 减去头部和导航的高度 */
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.content-scroll {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 16px;
}

/* 底部操作栏 */
.bottom-actions {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 0.6s ease-out 0.6s both;
}

.actions-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 16px;
}

/* 内容导航 */
.content-nav {
  margin-bottom: 24px;
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.nav-card {
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.nav-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.nav-items {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  min-width: 160px;
}

.nav-item:hover {
  background: rgba(102, 126, 234, 0.05);
  border-color: rgba(102, 126, 234, 0.2);
}

.nav-item.active {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.1) 0%,
    rgba(118, 75, 162, 0.1) 100%
  );
  border-color: rgba(102, 126, 234, 0.3);
}

.nav-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}

.nav-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
  font-size: 14px;
}

.nav-description {
  font-size: 12px;
  color: #666;
  line-height: 1.2;
}

/* 滚动条美化 */
.content-scroll::-webkit-scrollbar {
  width: 6px;
}

.content-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.content-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.content-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 内容 */
.content-card {
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.content-section {
  padding: 24px;
}

.section-header {
  margin-bottom: 32px;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #333;
}

.section-description {
  color: #666;
  margin: 0;
  font-size: 14px;
}

.content-form {
  max-width: 600px;
}

/* 动画效果 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-manage-page {
    padding: 16px;
  }

  .page-header {
    text-align: center;
  }

  .content-container {
    height: calc(100vh - 220px); /* 小屏幕上调整高度 */
  }

  .nav-items {
    gap: 6px;
    padding: 6px;
  }

  .nav-item {
    padding: 12px 16px;
    min-width: 140px;
  }

  .nav-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
    margin-right: 8px;
  }

  .nav-title {
    font-size: 13px;
  }

  .nav-description {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .content-section {
    padding: 16px;
  }

  .section-title {
    font-size: 20px;
  }

  .content-form :deep(.el-col) {
    width: 100%;
  }

  .nav-item {
    flex-direction: column;
    text-align: center;
    min-width: 100px;
    padding: 12px 8px;
  }

  .nav-icon {
    margin-right: 0;
    margin-bottom: 6px;
  }

  .nav-content {
    text-align: center;
  }

  .nav-title {
    font-size: 12px;
  }

  .nav-description {
    font-size: 10px;
  }
}

/* 图片上传组件样式 - 参考项目编辑页面 */
.upload-container {
  margin-bottom: 16px;
}

.cover-image-section {
  text-align: center;
  padding: 16px;
}

.cover-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.cover-preview img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 8px;
}

.cover-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.cover-upload {
  padding: 32px 24px;
  border: 2px dashed #d9d9d9;
  border-radius: 12px;
  background: #fafafa;
  transition: all 0.3s ease;
  cursor: pointer;
}

.cover-upload:hover {
  border-color: #409eff;
  background: #f0f7ff;
}

.cover-upload:active {
  transform: scale(0.98);
}

.upload-tip {
  font-size: 12px;
  color: #8c939d;
  margin-top: 8px;
  line-height: 1.4;
}

/* PDF上传组件样式 */
.pdf-section {
  margin-bottom: 16px;
}

.pdf-preview {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 16px;
  background: #f9f9f9;
}

.pdf-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.pdf-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 8px;
  margin-right: 16px;
  color: #409eff;
}

.pdf-details {
  flex: 1;
}

.pdf-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
  word-break: break-all;
}

.pdf-size {
  font-size: 12px;
  color: #909399;
}

.pdf-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.pdf-upload {
  padding: 24px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  background: #fafafa;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
}

.pdf-upload:hover {
  border-color: #409eff;
  background: #f0f7ff;
}

.upload-icon {
  font-size: 32px;
  color: #c0c4cc;
  margin-bottom: 8px;
}

.upload-text {
  font-size: 14px;
  color: #606266;
}

/* 简历图片上传组件样式 */
.resume-images-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.resume-image-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  transition: all 0.3s ease;
}

.resume-image-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.image-preview {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.image-preview img:hover {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity 0.3s ease;
}

.image-preview:hover .image-overlay {
  opacity: 1;
}

.image-actions {
  display: flex;
  justify-content: center;
  padding: 8px;
  gap: 8px;
}

.order-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-bottom: 8px;
}

.order-number {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.image-info {
  padding: 12px;
}

.image-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-size {
  font-size: 12px;
  color: #909399;
}

.add-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 2px dashed #d9d9d9;
  background: #fafafa;
}

.image-upload {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  width: 100%;
  height: 100%;
}

.upload-placeholder .upload-icon {
  font-size: 36px;
  color: #c0c4cc;
  margin-bottom: 12px;
}

.upload-placeholder .upload-text {
  font-size: 14px;
  color: #606266;
  margin-bottom: 0;
}

/* 暗色主题适配 */
.dark .header-content h1 {
  background: linear-gradient(135deg, #f8fafc, #cbd5e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .header-content p {
  color: #94a3b8;
}

.dark .save-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.dark .save-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.dark .reset-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8fafc;
}

.dark .reset-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

/* 内容区域暗色主题 */
.dark .content-scroll::-webkit-scrollbar-track {
  background: #334155;
}

.dark .content-scroll::-webkit-scrollbar-thumb {
  background: #64748b;
}

.dark .content-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 底部操作栏暗色主题 */
.dark .bottom-actions {
  background: rgba(30, 41, 59, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

/* 链接编辑器样式 */
/* Footer 页脚设置样式 */
.footer-basic-card,
.footer-section-card {
  margin-bottom: 24px;
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  overflow: visible;
}

.footer-section-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.footer-section-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.header-icon {
  margin-right: 8px;
  color: #667eea;
  font-size: 18px;
}

.header-title {
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

/* 链接编辑器样式 */
.links-editor {
  width: 100%;
}

.links-list {
  margin-bottom: 1rem;
}

.link-item {
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 16px;
  position: relative;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  overflow: hidden;
}

.link-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

.link-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.05) 0%,
    rgba(118, 75, 162, 0.05) 100%
  );
  border-bottom: 1px solid #e5e7eb;
}

.item-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

.remove-btn {
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.remove-btn:hover {
  background-color: rgba(245, 63, 63, 0.1);
  color: #f53f3f;
  transform: scale(1.1);
}

.link-content {
  padding: 16px;
}

.item-actions {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

.add-item {
  margin-top: 1rem;
  text-align: center;
}

.add-btn {
  border-radius: 8px;
  padding: 10px 24px;
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* 链接列表过渡动画 */
.link-list-enter-active,
.link-list-leave-active {
  transition: all 0.3s ease;
}

.link-list-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.link-list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.link-list-move {
  transition: transform 0.3s ease;
}

/* 暗色主题适配 */
.dark .link-item {
  background: #1e293b;
  border-color: #334155;
}

.dark .link-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.dark .link-item-header {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.1) 0%,
    rgba(118, 75, 162, 0.1) 100%
  );
  border-bottom-color: #334155;
}

.dark .footer-basic-card,
.dark .footer-section-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.dark .header-title {
  color: #f8fafc;
}

.dark .add-btn:hover {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 内容导航暗色主题 */
.dark .nav-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.dark .nav-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.dark .nav-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.dark .nav-item.active {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.2) 0%,
    rgba(37, 99, 235, 0.2) 100%
  );
  border-color: rgba(59, 130, 246, 0.4);
}

.dark .nav-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.dark .nav-title {
  color: #f8fafc;
}

.dark .nav-description {
  color: #94a3b8;
}

/* 内容区域暗色主题 */
.dark .content-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.dark .section-title {
  color: #f8fafc;
}

.dark .section-description {
  color: #94a3b8;
}

/* Element Plus 组件暗色主题适配 */
.dark :deep(.el-input__inner) {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.2);
  color: #f8fafc;
}

.dark :deep(.el-input__inner:focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.dark :deep(.el-input__inner::placeholder) {
  color: #64748b;
}

.dark :deep(.el-input__inner:hover) {
  border-color: rgba(255, 255, 255, 0.3);
}

.dark :deep(.el-textarea__inner) {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.2);
  color: #f8fafc;
}

.dark :deep(.el-textarea__inner:focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.dark :deep(.el-textarea__inner::placeholder) {
  color: #64748b;
}

.dark :deep(.el-input-number) {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.2);
}

.dark :deep(.el-input-number__decrease),
.dark :deep(.el-input-number__increase) {
  background: #334155;
  border-color: rgba(255, 255, 255, 0.2);
  color: #f8fafc;
}

.dark :deep(.el-input-number__decrease:hover),
.dark :deep(.el-input-number__increase:hover) {
  background: #475569;
  color: #3b82f6;
}

.dark :deep(.el-form-item__label) {
  color: #f8fafc;
}

.dark :deep(.el-button) {
  border-color: rgba(255, 255, 255, 0.2);
}

.dark :deep(.el-button--primary) {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
}

.dark :deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.dark :deep(.el-button--danger) {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: none;
}

.dark :deep(.el-button--danger:hover) {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.dark :deep(.el-upload) {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.2);
}

.dark :deep(.el-upload-dragger) {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.2);
}

.dark :deep(.el-upload-dragger:hover) {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

/* 图片上传组件暗色主题 */
.dark .cover-preview {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.dark .cover-upload {
  border: 2px dashed rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.dark .cover-upload:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.dark .upload-tip {
  color: #94a3b8;
}

/* 简历图片上传组件暗色主题 */
.dark .resume-image-item {
  background: #1e293b;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}

.dark .image-name {
  color: #f8fafc;
}

.dark .image-size {
  color: #94a3b8;
}

.dark .add-image {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.dark .upload-placeholder .upload-icon {
  color: #64748b;
}

.dark .upload-placeholder .upload-text {
  color: #cbd5e1;
}

/* 滚动条暗色主题 */
.dark ::-webkit-scrollbar-track {
  background: #334155;
}

.dark ::-webkit-scrollbar-thumb {
  background: #64748b;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style>
